import React from 'react';
import {parsePercent, numberHandle, safeMultiple} from '~/utils/number';
import CommonEchart from '../../../common/CommonEchart';

const tooltipCallback = (params = []) => {
    const tooltipList = params.map((chartItem, index) => {
        const {marker, name, seriesName, value} = chartItem;
        let result = '';
        if (index === 0) {
            if (seriesName === '平均去重听课时长' || seriesName === '平均直播上课时长') {
                result = `${name}<br/>${marker}${seriesName}: ${numberHandle(
                    value, 2
                )}`;
            } else {
                result = `${name}<br/>${marker}${seriesName}: ${parsePercent(
                    value
                )}`;
            }
        } else if (seriesName === '平均去重听课时长' || seriesName === '平均直播上课时长') {
            result = `<br/>${marker}${seriesName}: ${numberHandle(value, 2)}`;
        } else {
            result = `<br/>${marker}${seriesName}: ${parsePercent(value, 2)}`;
        }
        return result;
    });
    return tooltipList.join('');
};

const extendOptions = {
    chartId: 'RefundOnTeacherBarChart',
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    yAxis: {
        newYAxis: [
            {
                type: 'value',
                name: '',
                axisLabel: {formatter: value => numberHandle(value, 2)}
            },
            {
                type: 'value',
                name: '',
                axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
            }
        ],
        common: {
            splitLine: {show: false}
        }
    },
    legend: {
        // orient: 'vertical',
        left: 'left'
    },
    grid: {
        left: '8%',
        right: '6%',
        bottom: 20,
        containLabel: true
    },
    series: {
        newYAxis: [
            {
                yAxisIndex: 0,
                name: '平均去重听课时长',
                // label: {
                //     show: true,
                //     formatter: ({value}) => numberHandle(value, 2),
                //     position: 'top'
                // }
            },
            {
                yAxisIndex: 0,
                name: '平均直播上课时长',
                // label: {
                //     show: true,
                //     formatter: ({value}) => numberHandle(value, 2),
                //     position: 'top'
                // }
            },
            {
                yAxisIndex: 1,
                name: '作业订正率',
                // label: {
                //     show: true,
                //     formatter: ({value}) => parsePercent(value),
                //     position: 'top'
                // }
            },
            {
                yAxisIndex: 1,
                name: '有效听课率',
                // label: {
                //     show: true,
                //     formatter: ({value}) => parsePercent(value),
                //     position: 'top'
                // }
            },
            {
                yAxisIndex: 1,
                name: '直播上课率',
                // label: {
                //     show: true,
                //     formatter: ({value}) => parsePercent(value),
                //     position: 'top'
                // }
            }
        ],
        common: {
            barMaxWidth: 40,
            emphasis: {
                focus: 'series'
            }
        }
    }
};

const RefundOnTeacherBarChart = props => (
    <CommonEchart {...props} extendEchartsOptions={extendOptions} />
);

export default RefundOnTeacherBarChart;
